<template>
	<view class="index-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="location" @tap="refreshLocation">
				<image class="icon" src="/static/icons/location.png"></image>
				<text>{{ locationText }}</text>
				<!-- <text class="arrow">▼</text> -->
			</view>
			<view class="search-input" @tap="navigateToSearch">
				<image class="icon" src="/static/icons/search.png"></image>
				<input type="text" placeholder="搜索按摩服务" />
			</view>
		</view>
		<!-- 轮播图区域 -->
		<view class="banner-container">
			<swiper class="banner" circular autoplay interval="5000" duration="500">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item" mode="aspectFill" @tap="handleLinkUrl(index)"></image>
				</swiper-item>
			</swiper>

			<!-- 按钮区域 -->
			<view class="service-buttons">
				<view class="btn store-service" @tap="goToStoreService">
					<view class="content">
						<view class="text-content">
							<text class="title">预约到店</text>
							<view class="desc-container">
								<text class="desc-line1">环境优雅</text>
								<text class="desc-line2">高端品质专享服务</text>
							</view>
						</view>
						<image src="/static/icons/goStore.png" mode="aspectFit" class="service-icon"></image>
					</view>
					<view class="light-effect"></view>
				</view>
				<view class="btn home-service" @tap="goToHomeService">
					<view class="content">
						<view class="text-content">
							<text class="title">上门按摩</text>
							<view class="desc-container">
								<text class="desc-line1">专业技师</text>
								<text class="desc-line2">贴心上门服务到家</text>
							</view>
						</view>
						<image src="/static/icons/goHome.png" mode="aspectFit" class="service-icon"></image>
					</view>
					<view class="light-effect"></view>
				</view>
			</view>
		</view>

		<!-- 推荐技师模块 -->
		<view class="recommend-technicians">
			<view class="title-row">
				<text class="module-title">推荐技师</text>
				<view class="view-more" @tap="goToTechnicianList">
					查看更多
					<text class="arrow">></text>
				</view>
			</view>
			<scroll-view class="technician-scroll" scroll-x="true" show-scrollbar="false">
				<view class="technician-item" v-for="(item, index) in technicianList" :key="index"
					@tap="goToTechDetail(item)">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name-tag">
							<text class="name">{{ item.name }}</text>
							<text class="tag">{{ item.tag }}</text>
						</view>
						<view class="rating">
							<text class="score">{{ item.score }}分</text>
							<text class="orders">{{ item.orders }}单</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="membership-cards">
			<view class="title-row">
				<text class="module-title">会员卡</text>
				<view class="view-more" @tap="goToCardList">
					查看更多
					<text class="arrow">></text>
				</view>
			</view>
			<scroll-view class="card-scroll" scroll-x="true" show-scrollbar="false">
				<view class="card-item" v-for="(card, index) in cardList" :key="index" @tap="goToCardInfo(card.id)">
					<view class="card-content">
						<view class="card-info">
							<text class="card-name">{{card.cardName}}</text>
							<view class="price-container">
								<text class="before-price" v-if="card.beforePrice">￥{{card.beforePrice}}</text>
								<text class="card-price">￥{{card.price}}</text>
							</view>
						</view>
						<view class="card-image">
							<image :src="card.imgUrl" mode="aspectFill"></image>
						</view>
					</view>
					<view class="card-action">
						<text class="action-text">立即开通</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hot-services">
			<view class="title-row">
				<text class="module-title">热门服务</text>
				<view class="view-more" @tap="goToServiceList">
					查看更多
					<text class="arrow">></text>
				</view>
			</view>
			<view class="service-list">
				<view class="service-item" v-for="(item, index) in hotServiceList" :key="index"
					@tap="goToServiceDetail(item)">
					<image class="service-image" :src="item.image" mode="aspectFill"></image>
					<view class="service-info">
						<text class="name">{{ item.name }}</text>
						<text class="desc">{{ item.desc }}</text>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="number">{{ item.price }}</text>
							<text class="unit">起</text>
						</view>
					</view>
					<button class="book-btn">立即预约</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				locationText: '定位中...',
				bannerList: [],
				technicianList: [],
				hotServiceList: [],
				cardList: [],
				wxJssdkReady: false,
				wxJssdkInitAttempts: 0,
				jWeixin: null,
				isIOS: false,
				isAndroid: false,
				// 轮播图点击链接
				linkUrl: []
			}
		},
		onLoad() {
			// iOS 首次进入自动刷新
			// this.isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
			// if (this.isIOS && !sessionStorage.getItem('iosRefreshed_index')) {
			// 	sessionStorage.setItem('iosRefreshed_index', 'true');
			// 	window.location.reload();
			// 	return;
			// }

			// 检测是否 Android 环境
			this.isAndroid = /Android/i.test(navigator.userAgent);

			console.log('Is iOS:', this.isIOS); // iOS 返回 true
			console.log('Is Android:', this.isAndroid); // Android 返回 true
			// 检测是否在微信环境中
			const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent);
			if (isWeixinBrowser) {
				console.log('微信环境，开始初始化JSSDK');
				this.initWechatJssdk();
			} else {
				console.log('非微信环境，跳过JSSDK初始化');
			}


			this.getTechnicianList()
			this.getBannerList()
			this.getHotServiceList()
			this.getCardList()
			this.checkUserRealName()
		},
		onShow() {
			// const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent);
			// if (isWeixinBrowser) {
			// 	console.log('微信环境，开始初始化JSSDK');
			// 	this.initWechatJssdk();
			// } else {
			// 	console.log('非微信环境，跳过JSSDK初始化');
			// }
			this.getLocation()
			this.checkUserRealName()
		},
		mounted() {

		},
		methods: {
			goToCardInfo(id) {
				uni.navigateTo({
					url: `/pages/rechargeCard-list/rechargeCard-list?id=${id}`
				});
			},
			goToTechnician() {
				uni.navigateTo({
					url: '/pages/technician/home'
				})
			},
			// 加载页面数据
			loadPageData() {
				this.getLocation();
				this.getTechnicianList();
				this.getBannerList();
				this.getHotServiceList();
				this.getCardList();
				this.checkUserRealName();
			},
			// 获取轮播图数据
			getBannerList() {
				uni.request({
					url: `${uni.$config.baseUrl}/banner/banner/listAll`,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log('获取轮播图数据成功:', res.data)
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							// 处理轮播图数据
							if (res.data.rows && Array.isArray(res.data.rows)) {
								// 提前滞空，防止报错
								this.linUrl = []
								this.bannerList = res.data.rows.map(item => {
									// 获取轮播图跳转链接
									this.linkUrl.push(item.linkUrl || '')
									// 根据实际返回的数据结构调整
									return item.imageUrl || item.url || '/static/slider/default.png'
								})
							}
							console.log('轮播图点击跳转链接')
							console.log(this.linUrl)
						} else {
							uni.showToast({
								title: res.data.msg || '获取轮播图失败',
								icon: 'none'
							})
							// 使用默认轮播图数据
							this.bannerList = [
								'/static/slider/01.jpg',
								'/static/slider/02.png',
								'/static/slider/03.png'
							]
						}
					},
					fail: (err) => {
						console.error('获取轮播图数据失败:', err)
						uni.showToast({
							title: '网络请求失败，请检查网络',
							icon: 'none'
						})
						// 使用默认轮播图数据
						this.bannerList = [
							'/static/slider/01.jpg',
							'/static/slider/02.png',
							'/static/slider/03.png'
						]
					}
				})
			},
			// 轮播图点击跳转
			handleLinkUrl(index) {
				// 判断轮播图链接是否为空
				if(this.linkUrl[index]) {
					// 跳转链接
					location.href = this.linkUrl[index]
				}
			},
			// 获取技师列表
			getTechnicianList() {
				uni.showLoading({
					title: '加载中...'
				})

				// 获取存储的 token
				const token = uni.getStorageSync('token')

				if (!token) {
					// 如果没有 token，先调用登录接口获取 token
					this.getToken(() => {
						this.getTechnicianList() // 获取到 token 后重新调用
					})
					return
				}

				uni.request({
					url: `${uni.$config.baseUrl}/technician/technician/listAll`,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log('获取技师列表成功:', res.data)
						// 判断请求是否成功
						if (res.statusCode === 200 && res.data) {
							// 若依框架返回的数据格式通常是 { code: 200, msg: "success", rows: [...] }
							if (res.data.rows && Array.isArray(res.data.rows)) {
								this.technicianList = res.data.rows.map(item => {
									return {
										id: item.id,
										avatar: item.avatar ||
											'https://picsum.photos/200/200?random=' + item.id,
										name: item.name,
										tag: item.technicianType || '调理技师',
										score: item.score || '4.8',
										orders: item.appointmentCount || '0'
									}
								})
							}
						} else if (res.statusCode === 401 || (res.data && res.data.code === 401)) {
							// token 过期或无效，重新获取
							console.log('Token 已过期，重新获取')
							uni.removeStorageSync('token')
							this.getToken(() => {
								this.getTechnicianList() // 获取到新 token 后重新调用
							})
						} else {
							// 请求成功但返回错误状态
							uni.showToast({
								title: res.data.msg || '获取技师列表失败',
								icon: 'none'
							})
							// 使用默认数据
							this.setDefaultTechnicianList()
						}
					},
					fail: (err) => {
						console.error('获取技师列表失败:', err)
						uni.showToast({
							title: '网络请求失败，请检查网络',
							icon: 'none'
						})
						// 请求失败时使用默认数据
						this.setDefaultTechnicianList()
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			// 获取 token
			getToken(callback) {
				uni.showLoading({
					title: '登录中...'
				})

				// 若依框架的登录接口
				uni.request({
					url: `${uni.$config.baseUrl}/loginWithOutCode`,
					method: 'POST',
					data: {
						username: 'admin', // 替换为实际的用户名
						password: '111111' // 替换为实际的密码
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log('登录成功:', res.data)
						if (res.statusCode === 200 && res.data && res.data.token) {
							// 存储 token
							uni.setStorageSync('token', res.data.token)
							if (callback) callback()
						} else {
							uni.showToast({
								title: res.data.msg || '登录失败',
								icon: 'none'
							})
							// 登录失败时使用默认数据
							this.setDefaultTechnicianList()
						}
					},
					fail: (err) => {
						console.error('登录失败:', err)
						uni.showToast({
							title: '网络请求失败，请检查网络',
							icon: 'none'
						})
						// 登录失败时使用默认数据
						this.setDefaultTechnicianList()
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},

			// 设置默认技师列表数据
			setDefaultTechnicianList() {
				this.technicianList = [{
						id: 1,
						avatar: 'https://picsum.photos/200/200?random=1',
						name: '王医师',
						tag: '推拿师',
						score: '4.9',
						orders: '268'
					},
					{
						id: 2,
						avatar: 'https://picsum.photos/200/200?random=2',
						name: '李医师',
						tag: '按摩师',
						score: '4.8',
						orders: '186'
					},
					{
						id: 3,
						avatar: 'https://picsum.photos/200/200?random=3',
						name: '张医师',
						tag: '理疗师',
						score: '4.9',
						orders: '235'
					},
					{
						id: 4,
						avatar: 'https://picsum.photos/200/200?random=4',
						name: '陈医师',
						tag: '推拿师',
						score: '4.7',
						orders: '142'
					},
					{
						id: 5,
						avatar: 'https://picsum.photos/200/200?random=5',
						name: '刘医师',
						tag: '按摩师',
						score: '4.8',
						orders: '198'
					}
				]
			},

			// 获取定位信息
			getLocation() {
				if (this.loading) return
				this.loading = true
				this.locationText = '定位中...'

				// 获取当前页面完整URL，确保使用正确的域名
				const currentUrl = window.location.href.split('#')[0]
				console.log('当前页面URL:', currentUrl)

				// 先从后端获取jssdk配置
				uni.request({
					url: `${uni.$config.baseUrl}/wx/jssdk/config`,
					method: 'GET',
					data: {
						url: currentUrl
					},
					success: (res) => {
						if (res.statusCode === 200 && res.data.code === 200) {
							const config = res.data.data

							// 加载jweixin-module
							try {
								this.jWeixin = require('jweixin-module')

								// 配置微信JSSDK
								this.jWeixin.config({
									debug: false,
									appId: config.appId,
									timestamp: config.timestamp,
									nonceStr: config.nonceStr,
									signature: config.signature,
									jsApiList: ['getLocation', 'openLocation']
								})

								// 使用微信JSSDK获取位置
								this.jWeixin.ready(() => {
									this.jWeixin.getLocation({
										type: 'gcj02',
										success: (res) => {
											console.log('微信定位成功:', res)
											this.reverseGeocoder(res.latitude, res
												.longitude)
										},
										fail: () => {
											// 如果微信JSSDK获取位置失败，尝试使用浏览器原生定位
											this.getLocationByBrowser()
										}
									})
								})

								this.jWeixin.error((err) => {
									console.error('微信JSSDK配置失败:', err)
									// 如果微信JSSDK配置失败，尝试使用浏览器原生定位
									this.getLocationByBrowser()
								})
							} catch (error) {
								console.error('加载jweixin-module失败:', error)
								// 如果加载jweixin-module失败，尝试使用浏览器原生定位
								this.getLocationByBrowser()
							}
						} else {
							// 如果获取配置失败，尝试使用浏览器原生定位
							this.getLocationByBrowser()
						}
					},
					fail: () => {
						// 如果请求失败，尝试使用浏览器原生定位
						this.getLocationByBrowser()
					},
					complete: () => {
						this.loading = false
					}
				})
			},

			// 使用浏览器原生定位
			getLocationByBrowser() {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(
						(position) => {
							console.log('H5位置信息：', position)
							this.reverseGeocoder(position.coords.latitude, position.coords.longitude)
						},
						(error) => {
							console.error('H5获取位置失败：', error)
							// 使用IP定位替代默认位置
							this.getLocationByIP()
						}, {
							enableHighAccuracy: false, // 不需要高精度
							timeout: 5000, // 5秒超时
							maximumAge: 60000 // 允许使用最长1分钟的缓存位置
						}
					)
				} else {
					this.locationText = '浏览器不支持定位'
					// 使用IP定位替代默认位置
					this.getLocationByIP()
				}
			},

			// 微信环境下获取位置信息
			getWechatLocation() {
				// 先判断是否已经完成JSSDK配置
				if (!this.jWeixin || !this.wxJssdkReady) {
					console.warn('微信JSSDK未准备好，尝试IP定位');
					this.getLocationByIP();
					return;
				}

				// 调用微信获取位置API
				this.jWeixin.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('微信定位成功:', res);
						this.reverseGeocoder(res.latitude, res.longitude);
					},
					fail: (error) => {
						console.error('微信定位失败:', error);
						console.log('尝试使用IP定位');
						this.getLocationByIP();
					}
				});
			},

			// 使用IP定位
			async getLocationByIP() {
				try {
					console.log('开始IP定位');
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/map/location/v1/ip`,
						method: 'GET',
						data: {
							key: 'GJZBZ-5ZV6G-ID2QK-Q6ODP-WNIPQ-HZFB4' // 腾讯地图key
						}
					});

					console.log('IP定位结果:', result);

					if (result.data.code === 200 && result.data.data) {
						const location = result.data.data.result.location;
						if (location) {
							this.reverseGeocoder(location.lat, location.lng);
						} else {
							throw new Error('IP定位返回数据格式错误');
						}
					} else {
						throw new Error(result.data.msg || 'IP定位失败');
					}
				} catch (error) {
					console.error('IP定位失败:', error);
					// 如果IP定位失败，显示定位失败提示
					this.locationText = '定位失败';
					// uni.showToast({
					// 	title: '获取位置失败，请重试',
					// 	icon: 'none',
					// 	duration: 2000
					// });
				}
			},

			// 逆地址解析
			reverseGeocoder(latitude, longitude) {
				// #ifdef MP-WEIXIN
				// 在微信小程序环境中简单处理
				this.locationText = '当前位置'
				// #endif

				// #ifdef H5 || APP-PLUS || APP-NVUE
				// 调用后端接口进行地址解析
				uni.request({
					url: `${uni.$config.baseUrl}/map/geocoder/v1/reverse`,
					method: 'GET',
					data: {
						location: `${latitude},${longitude}`,
						key: 'GJZBZ-5ZV6G-ID2QK-Q6ODP-WNIPQ-HZFB4' // 腾讯地图key
					},
					success: (res) => {
						console.log('地址解析结果：', res.data)
						if (res.data.code === 200 && res.data) {
							const result = res.data.data
							if (result && result.address_component) {
								const address = result.address_component
								let locationStr = ''

								// 优先显示区+路
								if (address.street) {
									locationStr = `${result.address}`
								} else {
									locationStr = address.district || address.city || '未知地区'
								}

								this.locationText = locationStr
							} else {
								this.locationText = '地址解析失败'
							}
						} else {
							this.locationText = '地址解析失败'
						}
					},
					fail: (err) => {
						console.error('地址解析失败：', err)
						this.locationText = '获取地址失败'
					}
				})
				// #endif
			},

			// 刷新定位
			refreshLocation() {
				this.locationText = '定位中...'
				this.getLocation()
			},
			// 跳转到搜索页面
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages/project-list/project-list'
				})
			},

			// 跳转到上门服务页面
			goToHomeService() {
				uni.navigateTo({
					url: '/pages/home-massage/home-massage'
				})
			},

			// 跳转到到店服务页面
			goToStoreService() {
				uni.navigateTo({
					url: '/pages/store-booking/store-booking'
				})
			},

			// 跳转到技师列表页面
			goToTechnicianList() {
				uni.navigateTo({
					url: '/pages/technician-list/technician-list'
				})
			},

			goToServiceList() {
				uni.navigateTo({
					url: '/pages/project-list/project-list'
				})
			},

			goToServiceDetail(item) {
				uni.navigateTo({
					url: `/pages/service-detail/service-detail?id=${item.id}`
				})
			},

			goToTechDetail(tech) {
				uni.navigateTo({
					url: `/pages/technician-detail/technician-detail?id=${tech.id}`
				})
			},

			// 获取热门服务列表
			getHotServiceList() {
				uni.request({
					url: `${uni.$config.baseUrl}/project/project/listAllHot`,
					method: 'GET',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						console.log('获取热门服务列表成功:', res.data)
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							// 处理热门服务数据
							if (res.data.rows && Array.isArray(res.data.rows)) {
								this.hotServiceList = res.data.rows.map(item => {
									// 处理图片URL，如果有多个图片，取第一个
									const imageUrl = item.imgUrls ? item.imgUrls.split(',')[0] : null;
									return {
										id: item.id,
										name: item.projectName,
										desc: item.projectDesp || '专业服务，品质保证',
										price: item.price || '0',
										image: imageUrl || 'https://picsum.photos/200/200?random=' +
											item.id,
										storeNames: item.storeNames || ''
									}
								})
							}
						} else {
							uni.showToast({
								title: res.data.msg || '获取热门服务失败',
								icon: 'none'
							})
							// 使用默认数据
							this.setDefaultHotServiceList()
						}
					},
					fail: (err) => {
						console.error('获取热门服务列表失败:', err)
						uni.showToast({
							title: '网络请求失败，请检查网络',
							icon: 'none'
						})
						// 使用默认数据
						this.setDefaultHotServiceList()
					}
				})
			},

			// 设置默认热门服务列表数据
			setDefaultHotServiceList() {
				this.hotServiceList = [{
						id: 1,
						name: '全身推拿',
						desc: '舒缓全身疲劳，改善睡眠',
						price: '158',
						image: 'https://picsum.photos/200/200?random=6'
					},
					{
						id: 2,
						name: '颈椎调理',
						desc: '缓解颈椎不适，改善酸痛',
						price: '138',
						image: 'https://picsum.photos/200/200?random=7'
					},
					{
						id: 3,
						name: '足部按摩',
						desc: '活络经络，促进血液循环',
						price: '128',
						image: 'https://picsum.photos/200/200?random=8'
					},
					{
						id: 4,
						name: '中医推拿',
						desc: '专业手法，疏通经络',
						price: '168',
						image: 'https://picsum.photos/200/200?random=9'
					}
				]
			},

			// 获取会员卡列表
			getCardList() {
				uni.request({
					url: `${uni.$config.baseUrl}/card/card/listAll`,
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data && res.data.code === 200) {
							if (res.data.rows && Array.isArray(res.data.rows)) {
								this.cardList = res.data.rows.map(card => ({
									...card,
									price: Number(card.price),
									discount: Number(card.discount),
									validityDays: Number(card.validityDays)
								}))
							}
						}
					},
					fail: (err) => {
						console.error('获取会员卡列表失败:', err)
					}
				})
			},

			// 跳转到会员卡列表页面
			goToCardList() {
				uni.navigateTo({
					url: '/pages/card-list/card-list'
				})
			},

			// 处理图片加载错误
			handleImageError(e) {
				// 设置默认背景图
				const index = e.currentTarget.dataset.index;
				if (this.cardList[index]) {
					this.cardList[index].imgUrl = '/static/images/card-default.png';
				}
			},

			// 配置微信JSSDK
			async configWechatJssdk() {
				try {
					console.log('开始配置微信JSSDK');

					// 获取当前页面URL（不包含#号后面的部分）
					const url = location.href.split('#')[0];
					console.log('当前页面URL:', url);

					// 获取JSSDK配置
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/wx/jssdk/config`,
						method: 'GET',
						data: {
							url: url,
							timestamp: Math.floor(Date.now() / 1000)
						}
					});

					console.log('JSSDK配置响应:', result);

					if (result.data.code === 200) {
						const config = result.data.data;

						// 检查配置参数
						if (!config.appId || !config.timestamp || !config.nonceStr || !config.signature) {
							throw new Error('JSSDK配置参数不完整');
						}

						console.log('准备配置JSSDK，参数:', config);

						// 配置JSSDK
						this.jWeixin.config({
							debug: false,
							appId: config.appId,
							timestamp: config.timestamp,
							nonceStr: config.nonceStr,
							signature: config.signature,
							jsApiList: ['getLocation', 'openLocation', 'chooseLocation']
						});

						// 设置ready回调
						this.jWeixin.ready(() => {
							console.log('JSSDK配置成功');
							this.wxJssdkReady = true;
							// 配置成功后立即获取位置
							this.getWechatLocation();
						});

						// 设置error回调
						this.jWeixin.error((err) => {
							console.error('JSSDK配置失败:', err);
							// 尝试重新配置
							setTimeout(() => {
								this.configWechatJssdk();
							}, 2000);
						});
					} else {
						throw new Error(result.data.msg || '获取JSSDK配置失败');
					}
				} catch (error) {
					console.error('配置微信JSSDK时发生异常:', error);
					uni.showToast({
						title: 'JSSDK初始化失败: ' + error.message,
						icon: 'none',
						duration: 3000
					});

					// 延迟后尝试重新配置
					setTimeout(() => {
						console.log('尝试重新配置微信JSSDK...');
						this.configWechatJssdk();
					}, 3000);
				}
			},

			// 初始化微信JSSDK
			initWechatJssdk() {
				console.log('开始初始化微信JSSDK');

				// 先检查是否已经初始化
				if (this.wxJssdkReady) {
					console.log('微信JSSDK已经初始化，不再重复初始化');
					return;
				}

				// 记录初始化尝试次数
				this.wxJssdkInitAttempts = this.wxJssdkInitAttempts || 0;
				this.wxJssdkInitAttempts++;

				// 如果尝试次数过多，提示用户
				if (this.wxJssdkInitAttempts > 3) {
					console.warn(`已尝试初始化 ${this.wxJssdkInitAttempts} 次`);
					uni.showToast({
						title: 'JSSDK初始化失败，请刷新页面重试',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				// 动态加载微信JSSDK
				this.loadWechatJSSdkScript();
			},

			// 加载微信JSSDK脚本
			loadWechatJSSdkScript() {
				// 检查JSSDK脚本是否已加载
				if (this.jWeixin) {
					console.log('jWeixin对象已存在，直接配置JSSDK');
					this.configWechatJssdk();
					return;
				}

				// 显示加载状态
				uni.showLoading({
					title: '加载JSSDK...',
					mask: false
				});

				try {
					// 使用jweixin-module
					this.jWeixin = require('jweixin-module');
					console.log('成功加载jweixin-module');
					uni.hideLoading();
					this.configWechatJssdk();
				} catch (error) {
					console.error('加载jweixin-module失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载微信JSSDK失败',
						icon: 'none'
					});
				}
			},

			// Check if user has set their real name
			checkUserRealName() {
				// Get userInfo from localStorage
				const userInfoStr = uni.getStorageSync('userInfo')
				if (userInfoStr) {
					try {
						let userInfo
						// Parse userInfo if it's a string
						if (typeof userInfoStr === 'string') {
							const parsed = JSON.parse(userInfoStr)
							// Check if it's login response format
							if (parsed.code === 200 && parsed.data) {
								userInfo = parsed.data
							} else {
								userInfo = parsed
							}
						} else {
							userInfo = userInfoStr
						}

						// Check if realName is empty
						if (!userInfo.realName || userInfo.realName == '') {
							// Show modal asking user to set real name
							uni.showModal({
								title: '提示',
								content: '请先在个人信息中填写真实姓名',
								confirmText: '去填写',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										// Navigate to my-info page
										uni.navigateTo({
											url: '/pages/my-info/my-info'
										})
									}
								}
							})
						}
					} catch (e) {
						console.error('解析用户信息失败', e)
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.index-container {
		.search-bar {
			padding: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.location {
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				min-width: 180rpx;
				max-width: 280rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
					flex-shrink: 0;
				}

				text {
					font-size: 32rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.search-input {
				flex: 1;
				display: flex;
				align-items: center;
				height: 70rpx;
				background: #F8F8F8;
				border-radius: 32rpx;
				padding: 0 24rpx;
				margin-left: 10rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
					flex-shrink: 0;
				}

				input {
					flex: 1;
					font-size: 30rpx;
					color: #333;

					&::placeholder {
						color: #999;
					}
				}
			}
		}

		.banner-container {
			position: relative;
			width: 100%;
			height: 400rpx;
			margin-bottom: 20rpx;

			.banner {
				width: 100%;
				height: 100%;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
		}

		.service-buttons {
			width: 100%;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			margin-bottom: 30rpx;

			.btn {
				flex: 1;
				height: 180rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s;
				position: relative;
				overflow: hidden;

				.content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					z-index: 1;
					padding: 0 30rpx;
					width: 100%;

					.text-content {
						display: flex;
						flex-direction: column;

						.title {
							font-size: 36rpx;
							color: #FFFFFF;
							font-weight: 600;
							letter-spacing: 2rpx;
							margin-bottom: 8rpx;
						}

						.desc-container {
							display: flex;
							flex-direction: column;
							gap: 4rpx;

							.desc-line1 {
								font-size: 24rpx;
								color: rgba(255, 255, 255, 0.9);
								letter-spacing: 1rpx;
							}

							.desc-line2 {
								font-size: 22rpx;
								color: rgba(255, 255, 255, 0.8);
								letter-spacing: 1rpx;
							}
						}
					}

					.service-icon {
						width: 76rpx;
						height: 76rpx;
						margin-left: 20rpx;
					}
				}

				.light-effect {
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg,
							transparent,
							rgba(255, 255, 255, 0.3),
							transparent);
					animation: light-move 3s infinite;
				}

				&.home-service {
					background: linear-gradient(135deg, #66BB6A, #43A047);

					&:active {
						background: linear-gradient(135deg, #43A047, #2E7D32);
					}
				}

				&.store-service {
					background: linear-gradient(135deg, #42A5F5, #1976D2);

					&:active {
						background: linear-gradient(135deg, #1976D2, #1565C0);
					}
				}

				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
				}
			}
		}

		.recommend-technicians {
			height: 300rpx;
			padding: 30rpx 20rpx 0;
			margin-top: 200rpx;

			.title-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				padding: 0 10rpx;

				.module-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					line-height: 36rpx;
				}

				.view-more {
					font-size: 30rpx;
					color: #666;
					display: flex;
					align-items: center;

					.arrow {
						margin-left: 4rpx;
						font-size: 28rpx;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}

			.technician-scroll {
				white-space: nowrap;

				.technician-item {
					display: inline-block;
					width: 133rpx;
					margin-right: 35rpx;

					&:last-child {
						margin-right: 0;
					}

					.avatar {
						width: 133rpx;
						height: 133rpx;
						border-radius: 67rpx;
						margin-bottom: 16rpx;
					}

					.info {
						.name-tag {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-bottom: 12rpx;

							.name {
								font-size: 38rpx;
								color: #333;
								font-weight: 500;
								margin-bottom: 8rpx;
							}

							.tag {
								font-size: 32rpx;
								color: #2B87FF;
								background: rgba(43, 135, 255, 0.1);
								padding: 4rpx 12rpx;
								border-radius: 20rpx;
								white-space: nowrap;
							}
						}

						.rating {
							display: flex;
							justify-content: center;
							gap: 8rpx;
							font-size: 28rpx;
							color: #666;

							.score {
								color: #FF9500;
							}

							.orders {
								color: #999;
							}
						}
					}
				}
			}
		}

		.membership-cards {
			padding: 30rpx 20rpx 0;
			margin-top: 100rpx;

			.title-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				padding: 0 10rpx;

				.module-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					line-height: 36rpx;
				}

				.view-more {
					font-size: 30rpx;
					color: #666;
					display: flex;
					align-items: center;

					.arrow {
						margin-left: 4rpx;
						font-size: 28rpx;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}

			.card-scroll {
				white-space: nowrap;
				padding: 0 10rpx;

				.card-item {
					display: inline-block;
					width: 600rpx;
					height: 400rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
					position: relative;
					overflow: hidden;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);

					&:last-child {
						margin-right: 0;
					}

					.card-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
						object-fit: cover;
					}

					.card-content {
						padding: 30rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						position: relative;
						z-index: 2;

						.card-info {
							background: rgb(231, 220, 187);
							padding: 20rpx;
							border-radius: 16rpx 16rpx 0 0;
							backdrop-filter: blur(4rpx);

							.card-name {
								font-size: 36rpx;
								color: rgb(132, 94, 50);
								font-weight: 500;
								margin-bottom: 16rpx;
								text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
							}

							.price-container {
								display: flex;
								align-items: center;

								.before-price {
									font-size: 36rpx;
									color: rgb(197, 159, 109);
									text-decoration: line-through;
									margin-right: 8rpx;
									text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
								}

								.card-price {
									font-size: 44rpx;
									color: rgb(127, 80, 35);
									font-weight: bold;
									text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
								}
							}
						}

						.card-image {
							width: 100%;
							height: 300rpx;
							margin: 0;
							border-radius: 0 0 12rpx 12rpx;
							overflow: hidden;
							box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #f5f5f5;

							image {
								width: 100%;
								height: 100%;
								object-fit: contain;
							}
						}

						.card-benefits {
							display: flex;
							gap: 16rpx;
							background: rgba(43, 135, 255, 0.15);
							padding: 16rpx;
							border-radius: 16rpx;
							backdrop-filter: blur(4rpx);

							.benefit-item {
								font-size: 28rpx;
								color: #FFFFFF;
								background: rgba(255, 255, 255, 0.2);
								padding: 4rpx 16rpx;
								border-radius: 20rpx;
							}
						}
					}

					.card-action {
						position: absolute;
						right: 30rpx;
						bottom: 30rpx;
						z-index: 2;

						.action-text {
							font-size: 30rpx;
							color: #FFFFFF;
							background: rgba(0, 0, 0, 0.3);
							padding: 8rpx 24rpx;
							border-radius: 24rpx;
							backdrop-filter: blur(4rpx);
						}
					}

					&:active {
						transform: scale(0.98);
						transition: transform 0.2s;
					}
				}
			}
		}

		.hot-services {
			margin-top: 80rpx;
			padding: 20rpx;

			.title-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 0 10rpx;

				.module-title {
					font-size: 36rpx;
					font-weight: 600;
					color: #333;
					line-height: 36rpx;
				}

				.view-more {
					font-size: 30rpx;
					color: #666;
					display: flex;
					align-items: center;

					.arrow {
						margin-left: 4rpx;
						font-size: 28rpx;
					}

					&:active {
						opacity: 0.8;
					}
				}
			}

			.service-list {
				.service-item {
					display: flex;
					align-items: center;
					padding: 20rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

					.service-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.service-info {
						flex: 1;
						margin-right: 20rpx;

						.name {
							font-size: 34rpx;
							color: #333;
							font-weight: 500;
							margin-bottom: 12rpx;
						}

						.desc {
							font-size: 28rpx;
							color: #666;
							margin-bottom: 16rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}

						.price {
							display: flex;
							align-items: baseline;

							.symbol {
								font-size: 28rpx;
								color: #FF6B6B;
								margin-right: 2rpx;
							}

							.number {
								font-size: 36rpx;
								color: #FF6B6B;
								font-weight: 500;
							}

							.unit {
								font-size: 26rpx;
								color: #999;
								margin-left: 4rpx;
							}
						}
					}

					.book-btn {
						width: 140rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #2B87FF;
						color: #FFFFFF;
						font-size: 30rpx;
						border-radius: 30rpx;
						padding: 0;
						flex-shrink: 0;

						&:active {
							opacity: 0.9;
						}
					}
				}
			}
		}

		.float-book-btn {
			position: fixed;
			left: 50%;
			bottom: 30rpx;
			transform: translateX(-50%);
			width: 230rpx;
			height: 110rpx;
			border-radius: 55rpx;
			background: linear-gradient(135deg, #FFD54F, #FFA726);
			box-shadow: 0 4rpx 16rpx rgba(255, 167, 38, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 100;
			overflow: hidden;
			transition: all 0.3s;

			text {
				color: #FFFFFF;
				font-size: 38rpx;
				font-weight: 600;
				z-index: 1;
			}

			.light-effect {
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg,
						transparent,
						rgba(255, 255, 255, 0.3),
						transparent);
				animation: btn-light-move 3s infinite;
			}

			&:active {
				transform: translateX(-50%) scale(0.95);
				background: linear-gradient(135deg, #FFC107, #FF9800);
			}
		}
	}

	@keyframes light-move {
		0% {
			left: -100%;
		}

		20% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}

	@keyframes btn-light-move {
		0% {
			left: -100%;
		}

		20% {
			left: 100%;
		}

		100% {
			left: 100%;
		}
	}
</style>